<template>
    <view>
      <u-modal v-model="showXZ" :show-confirm-button="false" :show-title="false">
        <view class="my-modal">
          <u-section title="录像时间" :right="false"></u-section>
  
          <u-form class="u-m-t-40">
            <u-form-item  class="my-input ">
                <uni-datetime-picker
                  type="datetime"
                  :border="false"
                  placeholder="请选择开始时间"
                  return-type="string" 
                  v-model="searchData.beginTime"
                />
            </u-form-item>
            <u-form-item  class="my-input u-m-t-20">
                <uni-datetime-picker
                  type="datetime"
                  :border="false"
                  placeholder="请选择结束时间"
                  return-type="string"
                  v-model="searchData.endTime"
                />
            </u-form-item>
          </u-form>
  
          <view class="flex date my-submit">
            <u-button type="default" class="bt" @click.native="reset">取消</u-button>
            <u-button type="primary" class="bt" @click.native="submit">确定</u-button>
          </view>
  
        </view>
      </u-modal>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchData: {
          beginTime: '',
          endTime: '',
        },
        showXZ: true,
      }
    },
    created() {
      this.initTim()
    },
    onLoad(options) {
      this.searchData = Object.assign(this.searchData, JSON.parse(options.childItem))
    },
    methods: {
        initTim(){
          const { startTime, endTime} = this.$getStartAndEndTimeByEndTime(this.$date(Date.now()), "2");
          this.searchData.beginTime = startTime;
          this.searchData.endTime = endTime;
        },
        reset() {
            this.initTim()
            this.$emit('update:recordShow', false)
            this.$u.route({
              type: 'navigateBack',
              delta: 1
            })
        },
        submit() {
          if (this.searchData.beginTime > this.searchData.endTime) {
              this.$u.toast("开始时间不能大于结束时间")
              return
          }
          if(!this.searchData.beginTime || !this.searchData.endTime){
            this.$u.toast("请选择时间范围")
            return
          }
          this.showXZ = false
          this.$emit('update:recordShow', false);
          this.$emit('search', JSON.stringify(this.searchData));
        }
    }
  }
  </script>
  <style lang="scss" scoped>
  .date {
    margin: 1em 0;
  
    .bt {
      border-radius: 50px;
      flex-basis: 45%;
  
      &:after {
        border-radius: 50px;
      }
    }
  }
  
  /deep/ .my-modal {
    padding: 1em;
    background: rgb(247, 247, 250);
  
    .u-border-bottom:after {
      border-bottom-width: 0
    }
  
    .u-input {
      text-align: left !important;
    }
  
    .u-icon {
      color: rgb(61, 95, 255);
    }
  
  
    .my-input {
      background: rgb(255, 255, 255);
      padding: 0 1em;
      border-radius:
        22.5px;
    }
  
    .my-submit {
      margin-top: 3em;
    }
  }
  </style>
  